Skip to main content

Watermark

The watermark component can be used to display ownership marks or protect chart content. It may also be used to show system messages.

To control visibility and update data, use the Watermark component API:

changeWaterMarkVisibility = (chart: Chart, visible: boolean) => {
    chart.watermark.setWaterMarkVisible(visible);
}

setWaterMarkData = (chart: Chart) => {
    // you can display three rows of data using watermark
    chart.watermark.setWaterMarkData({
        firstRow: 'AAPL',
        secondRow: 'Apple Inc.',
        thirdRow: undefined,
    });
}

Configuration​

Watermark settings can be defined in the chart configuration using the ChartConfigComponentsWaterMark interface:

export interface ChartConfigComponentsWaterMark {
    visible: boolean;
    /**
     * Position on the screen.
     */
    position: WaterMarkPositionType;
    offsetX: number;
    offsetY: number;
    logoWidth: number;
    logoHeight: number;
    fontFamily: string;
    /**
     * Font size for first text line.
     */
    firstRowFontSize: number;
    /**
     * Padding after first text line.
     */
    firstRowBottomPadding: number;
    /**
     * Font size for second text line.
     */
    secondRowFontSize: number;
    /**
     * Padding after second text line.
     */
    secondRowBottomPadding: number;
    /**
     * Font size for third text line.
     */
    thirdRowFontSize: number;
    /**
     * Padding after third text line.
     */
    thirdRowBottomPadding: number;
}

To update the watermark configuration dynamically, use:

setWaterMarkConfig = (chart: Chart) => {
    chart.watermark.setWaterMarkConfig({
        visible: true,
        fontFamily: 'Open Sans, sans-serif',
        firstRowFontSize: 80,
        firstRowBottomPadding: 10,
        secondRowFontSize: 40,
        secondRowBottomPadding: 25,
        thirdRowFontSize: 40,
        thirdRowBottomPadding: 15,
        position: 'center',
        offsetX: 20,
        offsetY: 20,
        logoWidth: 20,
        logoHeight: 20,
    });
}

You can configure appearance options such as font family, font size, offsets, and paddings directly in _ChartConfig.ts_.

Time interval formatting​

You can also override the time interval formatter to customize how the aggregation period is displayed.

Further reading​